<template>
  <div class="home">
      <van-nav-bar
      title="头条"
      :fixed=true
      />
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <ArtItem v-for="item in list" :key="item.art_id"
      :title="item.title"
      :aut_name="item.aut_name"
      :comm_count="item.comm_count"
      :cover="item.cover"
      />
      </van-list>
      </van-pull-refresh>
  </div>
</template>

<script>
import request from '../../utils/request'
import {getArticData} from '../../api/getArtic'
import ArtItem from '../../components/ArtItem.vue'

export default {
  name: 'Home',
  created(){
    this.initArticData();
   
  },
  data(){
    return {
      page:1,
      limit:10,
      list:[],
      loading: true,
      finished: false,
      isLoading:false,
    }
  },
  methods: {
    async initArticData(isRefresh){
      const {data: res} = await getArticData(this.page,this.limit)
      if(isRefresh){
        //上拉刷新
        this.list=[...res,...this.list]
        this.isLoading=false
      }else{
        //下拉刷新
        this.list=[...this.list,...res];
        this.loading=false;
      }
     
      if(res.length===0){
        this.finished=true
      }
    },
    onLoad(){
      console.log("触发了");
      this.page++;
     this.initArticData(false);
    },
    onRefresh(){
      console.log("触发下拉");
      this.page++;
      this.initArticData(true);
    }
  },
  components:{
    ArtItem
  }
}
</script>

<style>
.van-list{
  margin-top: 50px;
}
.van-nav-bar__title{
  color: aliceblue;
}
.van-nav-bar{
    background-color: #007bff;
    
  }
</style>
